import React,{Suspense}from 'react'
import {BrowserRouter,Route,Routes,Navigate} from "react-router-dom"
import routes from "./Router_Config"
import {RouterList,RouterItem} from "../utils/index"
import NProgress from "../components/NProgress"
interface Props {
    
}

const RouterView = (props: Props) => {
    const renderRouter=(arr:RouterList)=>{
        return arr.map((item:RouterItem,index:number)=>{
            return <Route key={index} path={item.path} element={
                item.to?<Navigate to={item.to}></Navigate>:<item.element></item.element>
            }>
                {
                    item.children&&renderRouter(item.children)
                }
            </Route>
        })
    }
    return (
        <Suspense fallback={<NProgress/>}>
            <BrowserRouter>
                <Routes>
                    {
                        renderRouter(routes)
                    }
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default RouterView
